<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拿书</title>
    <link rel="stylesheet" href="css/takebook.css">
    <meta name='viewport' content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
       

    <div id="bookIndex" class="book-index bg">
        <div class="banner">
            <img src="img/banner.jpg" alt="">
        </div>
        <div class="flip-container">
            <div class="flipper" v-for="item in flop.bookList" :class = "{fan:item.fan}" @click="draw(item)">
                <div class="front">
                    <img src="img/1.png" alt="">
                </div>
                <div class="back" v-if="!item.imgUrl">
                    <img src="img/thank.png" alt="">
                </div>
                <div class="back" v-else>
                    <img src="img/win.png" alt="">
                    <img class="prize-img" src="img/prize.png" alt="">
                </div>
            </div>
        </div>
        <div class="chance">
            <p>（你还有<span>{{degree}}</span>次机会）</p>
        </div>
        <div class="index-footer">
            <div class="footer-left">
                <a href="">我的奖品</a>
            </div>
            <div class="footer-right">
                <a href="">活动规则</a>
            </div>
        </div> 

        <div class="popup" v-if="popup">
           <div class="bgs"></div>
           <div class="popBox">
                <div class="popBox-bg">
                    <h1>恭喜你</h1>
                    <p>获得奖品【iphoneX】一部</p>
                </div>
                <div>
                    <div class="prizeBox">
                        <img src="img/phone.png" alt="">
                    </div>
                    <div class="priDate">
                        <p>有效期：<span>2018／03/25～2018／04/25</span></p>
                    </div>
                    <div class="priBtn">
                        <button>兑换</button>
                    </div>
                </div>
            </div>
            <div class="close" @click="closeShow">
                <img src="img/close.png" alt="">
            </div>
        </div>  
        
        <div class="didnot" v-if="didnot">
            <span>{{didtext}}</span>
        </div>
        
        
        
    </div>
    
    <script src="js/takebook.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/auto-size.js"></script>
  
    <script>
        const bookIndex= new Vue({
            el:'#bookIndex',
            data:{
                clickNum:1,
                popup:false,
                degree:3,
                flop:pageBook,
                didnot:false,
                didtext:''
            },
            methods:{
                draw:function(e){
                    var _this = this;
                    
                    if(_this.clickNum){
                        _this.clickNum = 0
                        
                          e.fan = 1;
                    
                    setTimeout(function(){
                        for(var i in _this.flop.bookList){
                            _this.flop.bookList[i].fan = 1
                        }
                    },3000);
                    
                    setTimeout(function(){
                        _this.clickNum = 1
                            for(var i in _this.flop.bookList){
                                _this.flop.bookList[i].fan = 0
                            }
                    },6000)
                    
                    
                   
                    if( this.degree <= 1){
                        this.didtext = '今天的机会已用完'
                        this.degree = 0;
                    }else{
                        this.degree --;
                        this.didtext = '未中奖，再接再厉'
                    }
                    
                    if(e.imgUrl){
                        this.popup = true;
                        this.didnot = false;
                        for(var i in this.flop.bookList){
                            this.flop.bookList[i].fan = 0
                        }
                     }else{
                        setTimeout(function(){
                                 _this.didnot = true;
                        },1500)

                        setTimeout(function(){
                                 _this.didnot = false;
                        },3000)
                    }
                        
                    }
                    
                  
                },
                closeShow:function(){
                    this.popup = false;
                }
            }
        })
    
    
    
    </script>
    
    
    
    
    
    
</body>
</html>